<template>
    <div  class="app-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                        
            <el-row style="border-radius: 4px;">
                <el-col :span="12">
                    <el-form-item label="服务名称:" prop="name">
                        <el-input v-model="form.name" placeholder="请输入服务名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="主机:" prop="host">
                        <el-input v-model="form.host" placeholder="请输入主机信息 127.0.0.1"></el-input>
                    </el-form-item>
                </el-col>                
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="端口号:" prop="port">
                        <el-input type="number" v-model="form.port" placeholder="请输入端口号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="path:" prop="path">
                        <el-input v-model="form.path" placeholder="请输入请求路径，默认/"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="标签：" prop="">
                        <el-tag :key="tag" v-for="tag in form.tags" closable 
                        :disable-transitions="false" 
                        @close="handleServiceTagClose(tag)">
                            {{tag}}
                        </el-tag>
                        <el-input v-model="inputTag" placeholder="输入信息服务的标签信息，按enter键 确认"
                        @keyup.enter.native="handleInputTagConfirm"
                        @blur="handleInputTagConfirm"
                        ></el-input>
                    </el-form-item>                    
                </el-col>
            </el-row>

            <el-divider></el-divider>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="协议类型:" prop="protocol">
                        <el-select v-model="form.protocol" placeholder="请选择协议类型">
                            <el-option v-for="item in protocol" :key="item.label" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                
                <el-col :span="8">
                    <el-form-item label="客户端证书:" prop="certificates">
                        <el-select v-model="form.certificates" placeholder="请选择证书">
                            <el-option v-for="item in certificates" :key="item.label" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="重试次数:" prop="retries">
                        <el-input type="number" v-model="form.retrie" placeholder="默认重试次数为5"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="连接超时:" prop="connect_timeout">
                        <el-input type="number" v-model="form.connect_timeout" tips="连接上游服务的超时时长，默认值为60,000毫秒"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="写超时:" prop="write_timeout">
                        <el-input type="number" v-model="form.write_timeout" tips="写超时时长，默认值为60,000毫秒"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="读超时:" prop="read_timeout">
                        <el-input type="number" v-model="form.read_timeout" tips="读超时时长，默认值为60,000毫秒"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row type="flex" justify="end">
            <el-col :span="12">
                 <el-button type="primary" @click="submitForm">{{operateBtnName}}</el-button>
                 <el-button @click="cancel">取 消</el-button>
            </el-col>
        </el-row>            
    </div>
</template>
<script>
import {dict} from '@/const/dict.js';
import {addService,updateService} from '@/api/kong/service'
export default {
    props:{
        service:{
            type: Object,
            required: false,
        },
        operate: {
            type: String,
            required: false,
            default: "add"
        }

    },
    data () {
        return {
            form:{
                name:null,
                host:null,
                protocol:"http",
                port: 80,
                path: "/",
                retrie:5,
                connect_timeout: 60000,
                write_timeout: 60000,
                read_timeout: 60000,
                tags:[]
            },
            protocol:dict.PROTOCOLS,
            // 证书
            certificates: [],
            // 输入标签
            tags: "",
            inputTag: "",
            value: "",
            // 表单校验
            rules:{
                name: [
                    { required: true, message: "服务名不能为空", trigger: "blur" },
                ],
                host:[
                    { required: true, message: "主机信息不能为空",trigger:"blur"}
                ],
                port:[
                    { required: true, message: "请求端口号必填" , trigger: "blur"}
                ],
                path:[
                    { required: true, message:"请求路径必填", trigger: "blur"}
                ]
            },
            operateBtnName: "新增",

        }
    },
    created(){
        if(this.operate=="add"){
            this.operateBtnName="新增";
        }else{
            this.operateBtnName="修改";
        }
        this.form= this.service || this.form
        // console.log("this.form:"+JSON.stringify(this.form))
    },
    methods:{
        // 表单提交
        submitForm(){
            this.$refs['form'].validate(valid => {
                if (!valid) return;
                console.log(this.form);
                if(this.operate=="add"){
                    // TODO 提交表单
                    addService(this.form).then( res =>{
                        // console.log(JSON.stringify(res))
                        // 重置表单
                        this.reset();
                        // 关闭窗口
                        this.$emit('callback',"新增成功");
                    })
                }

                if(this.operate=="edit"){
                    updateService(this.form).then(res =>{
                        // 重置表单
                        this.reset();
                        // 关闭窗口
                        this.$emit('callback',"修改成功");

                    })
                }
            })
        },
        // 取消按钮事件
        cancel(){
            // 重置表单
            this.reset();
            // 关闭窗口
            this.$emit('callback',"已取消新增操作");
        },
        // 标签关闭事件
        handleServiceTagClose(tag){
            this.form.tags.splice(this.form.tags.indexOf(tag),1);
        },
        // 标签输入确认事件
        handleInputTagConfirm(){
            let inputValue=this.inputTag;
            if(inputValue){
                if(this.form.tags.indexOf(inputValue)>-1){
                    this.inputTag="";
                    return;
                }
                this.form.tags.push(inputValue);
            }
            this.inputTag="";
        },
        
        // 表单重置
        reset() {
            this.form = {
                name:null,
                host:null,
                protocol:"http",
                port: 80,
                path: "/",
                retrie:5,
                connect_timeout: 60000,
                write_timeout: 60000,
                read_timeout: 60000,
                tags:[]
            };
            this.resetForm("form");
        },
    }
    
}
</script>
<style scoped>
</style>